<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<link rel="stylesheet" href="./css/index.css">
<script src="./js/fenlei.js"></script>
<link rel="stylesheet" href="../1.9/sass/jd.css">
<style>
    * {
        list-style: none;
        padding: 0;
        margin: 0;
    }

    .home {
        width: 1190px;
        background-color: rgb(241, 241, 241);
        margin: 10px auto;
        position: relative;
    }

    .contenthome {
        margin: 0 auto;
        width: 1190px;
    }

    .content-title {
        width: 1190px;
        height: 480px;
        margin: 0 auto;
        position: relative;
    }

    .content-left {
        width: 190px;
        height: 480px;
        background-color: rgb(155, 155, 155);
    }

    .content {
        width: 590px;
        height: 460px;
        margin: 0 auto;
        position: absolute;
    }

    .content-center {
        width: 790px;
        top: 0;
        left: 200px;
        height: 480px;
        position: absolute;
    }

    .content1-right {
        width: 200px;
        height: 480px;
        right: -10px;
        position: absolute;
    }

    .content1-right div {
        width: 200px;
        height: 470px;
        right: 0px;
        top: 0;
        position: absolute;
    }

    .content-right2 {
        width: 190px;
        height: 480px;
        right: 0;
        top: 0;
        position: absolute;
        background-color: rgb(255, 96, 96);
    }

    .content1-right img {
        width: 190px;
        height: 150px;
    }

    .loop-area img {
        width: 590px;
        height: 470px;
        position: absolute;
    }

    .loop1 .btn {
        width: 30px;
        height: 50px;
        font-size: 24px;
        position: absolute;
        text-align: center;
        line-height: 50px;
        background-color: rgba(0, 0, 0, .3);
        cursor: pointer;
    }

    .loop1 .left {
        top: 50%;
        transform: translateY(-50%);
        left: 0;
        border-top-right-radius: 25px;
        border-bottom-right-radius: 25px;
    }

    .loop1 .right {
        top: 50%;
        transform: translateY(-50%);
        border-top-left-radius: 25px;
        border-bottom-left-radius: 25px;
        right: 0;
    }

    .points {
        position: absolute;
        bottom: 0px;
        right: 30px;
        /* width: 200px; */
    }

    .point {
        width: 10px;
        height: 10px;
        background-color: rgb(0, 0, 0);
        list-style: none;
        border-radius: 50%;
        margin: 10px;
        float: left;
    }

    .loop1 .item {
        opacity: 0;
        transition: all 1s;
    }

    .loop-area .active {
        opacity: 1;
    }

    .loop-area1 div {
        opacity: 0;
        transition: all 1s;
    }

    .loop-area1 .active {
        opacity: 1;
    }

    .points .active {
        background-color: #fff;
    }

    .content2-left {
        width: 190px;
        left: -5px;
        height: 260px;
        background-color: red;
        display: none;
    }

    .content2-lunbo {
        width: 800px;
        background-color: #ff6700;
        height: 260px;
        left: 190px;
        position: absolute;
        overflow: hidden;
    }

    .content2-lunbo1 {
        width: 4000px;
        background-color: #fff;
        height: 260px;
        float: left;
        position: absolute;
        display: flex;
        overflow: hidden;
    }

    .content2-lunbo1 img {
        width: 140px;
        height: 140px;
    }

    .content2-lunbo1 li {
        margin: 0 30px;
        width: 207px;
        height: 260px;
    }

    .content2-lunbo1 p {
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

    .content2-lunbo .spanlt {
        left: 0;
        position: absolute;
        width: 20px;
        font-size: 24px;
        line-height: 50px;
        height: 50px;
        top: 50%;
        border-top-right-radius: 20px;
        border-bottom-right-radius: 20px;
        transform: translateY(-50%);
        z-index: 1;
        background-color: rgba(0, 0, 0, .3);
    }

    .content2-lunbo .spangt {
        position: absolute;
        width: 20px;
        font-size: 24px;
        line-height: 50px;
        height: 50px;
        border-top-left-radius: 20px;
        border-bottom-left-radius: 20px;
        top: 50%;
        transform: translateY(-50%);
        z-index: 1;
        background-color: rgba(0, 0, 0, .3);
        right: 0;
    }

    .content2-rightlunbo {
        width: 180px;
        height: 240px;
        right: 0;
        display: none;
        /* padding: 10px; */
        background-color: #aaa;
    }

    .content2 div {
        position: absolute;
    }

    .content2 {
        width: 1180px;
        margin: 0 auto;
        height: 260px;
        display: flex;
        position: relative;
    }
</style>


<body>
    <div class="home">

        <div class="count-left"></div>

        <div class="contenthome">
            <div class="content-title">
                <div class="left">
                    <ul class="yjfl">
                        <li class="item">
                            <a href="#">家用电器</a>
                            <div class="ejcd">
                                <ul class="head">
                                    <li class="head-item">
                                        <a href="#">家电馆</a> &gt;
                                    </li>
                                </ul>
                                <ul class="menu-body">
                                    <li class="menu-item">
                                        <div class="menu-name">
                                            家电 &gt;
                                        </div>
                                        <ul class="ej-list">
                                            <li class="ej-item">
                                                超薄电视
                                            </li>
                                            <li class="ej-item">
                                                全面屏电视
                                            </li>
                                            <li class="ej-item">
                                                智能电视
                                            </li>
                                        </ul>
                                    </li>
                                </ul>
                            </div>
                        </li>
                    </ul>
                </div>
                <div class="content-center">
                    <div class="content loop1">
                        <div class="loop-area">
                            <img src="./jdimg/jd1lunbo/2a79047e1e3f805a.jpg.webp" alt="" class="item ">
                            <img src="./jdimg/jd1lunbo/2f9e31a097b6d8fa.jpg.webp" alt="" class="item">
                            <img src="./jdimg/jd1lunbo/32c4d03b6b53b4b7.jpg.webp" alt="" class="item">
                            <img src="./jdimg/jd1lunbo/5754b01fdad0d876.jpg.webp" alt="" class="item">
                            <img src="./jdimg/jd1lunbo/ed10f99e19f6c537.jpg.webp" alt="" class="item"> <img
                                src="./jdimg/jd1lunbo/q (1).jpg" alt="" class="item"> <img
                                src="./jdimg/jd1lunbo/q (2).jpg" alt="" class="item"> <img src="./jdimg/jd1lunbo/q.jpg"
                                alt="" class="item">
                        </div>
                        <!-- <span class="btn left">&lt;</span>
            <span class="btn right">&gt;</span> -->
                        <!-- <ul class="points">
                <li class="point active"></li>
                <li class="point"></li>
                <li class="point"></li>
                <li class="point"></li>
                <li class="point"></li>
            </ul> -->

                    </div>
                    <div class="content1-right  loop-area1 loop2">
                        <div class=" content1-right-one active">
                            <img src="./jdimg/jd1rightlunbo/12ac2983269a28d4.png.webp" alt="">
                            <img src="./jdimg/jd1rightlunbo/2141eccad12fc323.jpg.webp" alt="">
                            <img src="./jdimg/jd1rightlunbo/2a1b7a26c7cd2da7.png.webp" alt=""></div>
                        <div class=" content1-right-two">
                            <img src="./jdimg/jd1rightlunbo/5e89b88a50b0c061.jpg.webp" alt="">
                            <img src="./jdimg/jd1rightlunbo/9f4a7982ec9cf5d2.jpg.webp" alt="">
                            <img src="./jdimg/jd1rightlunbo/a1850e9c5141bb4d.jpg.webp" alt=""></div>
                        <div class=" content1-right-three">
                            <img src="./jdimg/jd1rightlunbo/d7e9a51af7c91233.jpg.webp" alt="">
                            <img src="./jdimg/jd1rightlunbo/f0e647dd34088f79.jpg.webp" alt="">
                            <img src="./jdimg/jd1rightlunbo/f4ae7610aa333edd.jpg.webp" alt=""></div>

                    </div>
                </div>
                <div class="content-right2">

                </div>

            </div>
            <div class="content2 loop3">

                <div class="content2-left">京东秒杀</div>
                <div class="content2-lunbo">
                    <span class="spangt">&gt;</span>
                    <span class="spanlt">&lt;</span>
                    <div class="content2-lunbo1">

                        <li><img src="./jdimg/jd2lunbo/0ab25c461f90b4d4.jpg.webp" alt="">
                            <p>抖音同款猪小屁 儿童玩具音乐跳舞机器人婴儿0-1岁宝宝女孩男孩6-12个月新年春节礼物早教1岁周半 猪小屁【唱歌+跳舞+灯光】</p><span>￥58</span>
                        </li>
                        <li> <img src="./jdimg/jd2lunbo/27dda2a9250c6218.jpg.webp" alt="">
                            <p>抖音同款猪小屁 儿童玩具音乐跳舞机器人婴儿0-1岁宝宝女孩男孩6-12个月新年春节礼物早教1岁周半 猪小屁【唱歌+跳舞+灯光】</p><span>￥58</span>
                        </li>
                        <li> <img src="./jdimg/jd2lunbo/611e409aeb7d8972.jpg.webp" alt="">
                            <p>抖音同款猪小屁 儿童玩具音乐跳舞机器人婴儿0-1岁宝宝女孩男孩6-12个月新年春节礼物早教1岁周半 猪小屁【唱歌+跳舞+灯光】</p><span>￥58</span>
                        </li>
                        <li> <img src="./jdimg/jd2lunbo/63afe9b4e4a11ecc.jpg.webp" alt="">
                            <p>抖音同款猪小屁 儿童玩具音乐跳舞机器人婴儿0-1岁宝宝女孩男孩6-12个月新年春节礼物早教1岁周半 猪小屁【唱歌+跳舞+灯光】</p><span>￥58</span>
                        </li>
                        <li> <img src="./jdimg/jd2lunbo/69e0f4661c132557.jpg.webp" alt="">
                            <p>抖音同款猪小屁 儿童玩具音乐跳舞机器人婴儿0-1岁宝宝女孩男孩6-12个月新年春节礼物早教1岁周半 猪小屁【唱歌+跳舞+灯光】</p><span>￥58</span>
                        </li>
                        <li> <img src="./jdimg/jd2lunbo/6da7915f3b763ed8.jpg.webp" alt="">
                            <p>抖音同款猪小屁 儿童玩具音乐跳舞机器人婴儿0-1岁宝宝女孩男孩6-12个月新年春节礼物早教1岁周半 猪小屁【唱歌+跳舞+灯光】</p><span>￥58</span>
                        </li>
                        <li> <img src="./jdimg/jd2lunbo/7476c92454a7e1be.jpg.webp" alt="">
                            <p>抖音同款猪小屁 儿童玩具音乐跳舞机器人婴儿0-1岁宝宝女孩男孩6-12个月新年春节礼物早教1岁周半 猪小屁【唱歌+跳舞+灯光】</p><span>￥58</span>
                        </li>
                        <li><img src="./jdimg/jd2lunbo/75b601ae5c487862.jpg.webp" alt="">
                            <p>抖音同款猪小屁 儿童玩具音乐跳舞机器人婴儿0-1岁宝宝女孩男孩6-12个月新年春节礼物早教1岁周半 猪小屁【唱歌+跳舞+灯光】</p><span>￥58</span>
                        </li>
                        <li><img src="./jdimg/jd2lunbo/8960b2424f9dd826.jpg.webp" alt="">
                            <p>抖音同款猪小屁 儿童玩具音乐跳舞机器人婴儿0-1岁宝宝女孩男孩6-12个月新年春节礼物早教1岁周半 猪小屁【唱歌+跳舞+灯光】</p><span>￥58</span>
                        </li>
                        <li><img src="./jdimg/jd2lunbo/9380736b1a23cf43.jpg.webp" alt="">
                            <p>抖音同款猪小屁 儿童玩具音乐跳舞机器人婴儿0-1岁宝宝女孩男孩6-12个月新年春节礼物早教1岁周半 猪小屁【唱歌+跳舞+灯光】</p><span>￥58</span>
                        </li>
                        <li><img src="./jdimg/jd2lunbo/992a3b3ba3dbd256.jpg.webp" alt="">
                            <p>抖音同款猪小屁 儿童玩具音乐跳舞机器人婴儿0-1岁宝宝女孩男孩6-12个月新年春节礼物早教1岁周半 猪小屁【唱歌+跳舞+灯光】</p><span>￥58</span>
                        </li>
                        <li><img src="./jdimg/jd2lunbo/9f85ac227d4adf7d.jpg.webp" alt="">
                            <p>抖音同款猪小屁 儿童玩具音乐跳舞机器人婴儿0-1岁宝宝女孩男孩6-12个月新年春节礼物早教1岁周半 猪小屁【唱歌+跳舞+灯光】</p><span>￥58</span>
                        </li>
                        <li><img src="./jdimg/jd2lunbo/ae8994d623b4a5ca.jpg.webp" alt="">
                            <p>抖音同款猪小屁 儿童玩具音乐跳舞机器人婴儿0-1岁宝宝女孩男孩6-12个月新年春节礼物早教1岁周半 猪小屁【唱歌+跳舞+灯光】</p><span>￥58</span>
                        </li>
                        <li><img src="./jdimg/jd2lunbo/b37afe1728178a67.jpg.webp" alt="">
                            <p>抖音同款猪小屁 儿童玩具音乐跳舞机器人婴儿0-1岁宝宝女孩男孩6-12个月新年春节礼物早教1岁周半 猪小屁【唱歌+跳舞+灯光】</p><span>￥58</span>
                        </li>
                        <li><img src="./jdimg/jd2lunbo/ba6bc7e1df82abca.jpg.webp" alt="">
                            <p>抖音同款猪小屁 儿童玩具音乐跳舞机器人婴儿0-1岁宝宝女孩男孩6-12个月新年春节礼物早教1岁周半 猪小屁【唱歌+跳舞+灯光】</p><span>￥58</span>
                        </li>
                        <li><img src="./jdimg/jd2lunbo/bff89f7b8322a4fc.jpg.webp" alt="">
                            <p>抖音同款猪小屁 儿童玩具音乐跳舞机器人婴儿0-1岁宝宝女孩男孩6-12个月新年春节礼物早教1岁周半 猪小屁【唱歌+跳舞+灯光】</p><span>￥58</span>
                        </li>
                        <li><img src="./jdimg/jd2lunbo/c35706215da1102b.jpg.webp" alt="">
                            <p>抖音同款猪小屁 儿童玩具音乐跳舞机器人婴儿0-1岁宝宝女孩男孩6-12个月新年春节礼物早教1岁周半 猪小屁【唱歌+跳舞+灯光】</p><span>￥58</span>
                        </li>
                        <li><img src="./jdimg/jd2lunbo/e86b0b2f4839d730.jpg.webp" alt="">
                            <p>抖音同款猪小屁 儿童玩具音乐跳舞机器人婴儿0-1岁宝宝女孩男孩6-12个月新年春节礼物早教1岁周半 猪小屁【唱歌+跳舞+灯光】</p><span>￥58</span>
                        </li>
                        <li><img src="./jdimg/jd2lunbo/f9ee42544216c7a7.jpg.webp" alt="">
                            <p>抖音同款猪小屁 儿童玩具音乐跳舞机器人婴儿0-1岁宝宝女孩男孩6-12个月新年春节礼物早教1岁周半 猪小屁【唱歌+跳舞+灯光】</p><span>￥58</span>
                        </li>
                        <li><img src="./jdimg/jd2lunbo/08b280e2592324da.png.webp" alt="">
                            <p>抖音同款猪小屁 儿童玩具音乐跳舞机器人婴儿0-1岁宝宝女孩男孩6-12个月新年春节礼物早教1岁周半 猪小屁【唱歌+跳舞+灯光】</p><span>￥58</span>
                        </li>
                        <li> <img src="./jdimg/jd2lunbo/0ab25c461f90b4d4.jpg.webp" alt="">
                            <p>抖音同款猪小屁 儿童玩具音乐跳舞机器人婴儿0-1岁宝宝女孩男孩6-12个月新年春节礼物早教1岁周半 猪小屁【唱歌+跳舞+灯光】</p><span>￥58</span>
                        </li>

                    </div>
                </div>
                <div class="content2-rightlunbo"></div>
            </div>
            <div class="meiri">
                <div class="meiritejia">
                    <div class="meirititle">
                        <div class="meirititleleft">
                            <h3>每日特价</h3><span></span>
                        </div>
                        <div class="meirititleright">
                            <ul class="ww">
                                <li class="cc">精选</li>
                                <li class="cc">美食</li>
                                <li class="cc">百货</li>
                                <li class="cc">个护</li>
                                <li class="cc">预告</li>
                            </ul>
                        </div>
                    </div>
                    <div class="meiribottom">
                        <div class="meirileft"></div>
                        <div class="meirirght"></div>
                    </div>

                </div>
                <div class="pinpaishangou"></div>
            </div>
            <div class="findgood">
                <div class="findleft"></div>
                <div class="findright"></div>
            </div>
            <div class="newfabu">
                <div class="newfabuleft">
                        <i class="btn left">&lt;</i>
                        <i class="btn right">&gt;</i>
                    <div class="newfabucontent">
                        <div class="loop-item">
                            <div class="loop-img"><img src="./jdimg/jdnewfabu/1.webp" alt=""></div>
                            <div class="loop-text">
                                <div class="item-title">森海塞尔（Sennheiser）MOMENTUM 真无线二代蓝牙主动降噪运动耳机 HIFI入耳式耳机 黑色</div>
                                <div class="item-desc">来这里发现更多新品</div>
                                <div class="item-price"><span class="yuan"> ￥</span>2199.00 <span class="qi"> 起</span>
                                </div>
                            </div>
                        </div>
                        <div class="loop-item active">
                            <div class="loop-img"><img src="./jdimg/jdnewfabu/2.webp" alt=""></div>
                            <div class="loop-text">
                                <div class="item-title">森海塞尔（Sennheiser）MOMENTUM 真无线二代蓝牙主动降噪运动耳机 HIFI入耳式耳机 黑色</div>
                                <div class="item-desc">来这里发现更多新品</div>
                                <div class="item-price"><span class="yuan"> ￥</span>2199.00 <span class="qi"> 起</span>
                                </div>
                            </div>
                        </div>
                        <div class="loop-item">
                            <div class="loop-img"><img src="./jdimg/jdnewfabu/3.webp" alt=""></div>
                            <div class="loop-text">
                                <div class="item-title">森海塞尔（Sennheiser）MOMENTUM 真无线二代蓝牙主动降噪运动耳机 HIFI入耳式耳机 黑色</div>
                                <div class="item-desc">来这里发现更多新品</div>
                                <div class="item-price"><span class="yuan"> ￥</span>2199.00 <span class="qi"> 起</span>
                                </div>
                            </div>
                            <div class="newfabutop"></div>
                            <div class="newfabuguang"></div>
                            <div class="newfaburight"></div>
                        </div>
                        <div class="loop-item">
                            <div class="loop-img"><img src="./jdimg/jdnewfabu/4.webp" alt=""></div>
                            <div class="loop-text">
                                <div class="item-title">森海塞尔（Sennheiser）MOMENTUM 真无线二代蓝牙主动降噪运动耳机 HIFI入耳式耳机 黑色</div>
                                <div class="item-desc">来这里发现更多新品</div>
                                <div class="item-price"><span class="yuan"> ￥</span>2199.00 <span class="qi"> 起</span>
                                </div>
                            </div>
                        </div>
                        <div class="loop-item">
                            <div class="loop-img"><img src="./jdimg/jdnewfabu/1.webp" alt=""></div>
                            <div class="loop-text">
                                <div class="item-title">森海塞尔（Sennheiser）MOMENTUM 真无线二代蓝牙主动降噪运动耳机 HIFI入耳式耳机 黑色</div>
                                <div class="item-desc">来这里发现更多新品</div>
                                <div class="item-price"><span class="yuan"> ￥</span>2199.00 <span class="qi"> 起</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    </div>
    <script src="./js/render.js"></script>


    <script>
        function Loop(params) {
            this.obj = document.querySelector(params.selector)
            this.loop = this.obj.querySelector('.loop-area')
            this.points = this.obj.querySelector('.points')
            this.point = this.obj.querySelectorAll(' .points .point')
            this.obj.style.height = params.height + "px"
            this.obj.style.width = params.width + "px"
            this.items = this.obj.querySelectorAll('.loop-area .item')
            this.items[0].classList.add('active')
            this.len = this.items.length;
            this.index = 0;
            // this.createBtn();
            if (params.autoplay) {
                this.autoplay();
            }
            if (params.btnClick) {
                this.createBtn();
            }
            if (params.pointClick) {
                this.createPoints();
            }
            if (params.inOut) {
                this.inOut();
            }
        }
        //添加移动添加active类名
        Loop.prototype.move = function () {
            // console.log(this.items[this.index])
            for (var i = 0; i < this.len; i++) {
                this.items[i].classList.remove('active')
                if (this.pointClick) {
                    this.point[i].classList.remove('active')
                }
            }
            this.items[this.index].classList.add('active')
            if (this.pointClick) {
                this.point[this.index].classList.add('active')
            }
        }
        //向上一张点击
        Loop.prototype.prev = function () {
            this.index--;
            if (this.index <= -1) {
                this.index = this.len - 1
            }
            this.move()
        }
        //乡下一张点击
        Loop.prototype.next = function () {
            this.index++;
            if (this.index >= this.len) {
                this.index = 0
            }
            this.move()
        }
        //autoplay是一个计时器
        Loop.prototype.autoplay = function () {
            var that = this;
            // console.log(that)
            this.timer = setInterval(function () {
                that.next();
            }, 1500)
        }
        //左右点击的按钮创建以及封装
        Loop.prototype.createBtn = function () {
            var that = this
            this.left = document.createElement('span')
            this.left.className = 'btn left';
            this.left.innerHTML = "&lt"
            this.right = document.createElement('span')
            this.right.className = 'btn right';
            this.right.innerHTML = '&gt'
            this.obj.append(this.left, this.right)
            this.left.onclick = function () {
                that.prev()
            }
            this.right.onclick = function () {
                that.next()
            }
        }
        //圆点点击创建的按钮以及封装
        Loop.prototype.createPoints = function () {
            var that = this
            this.points = document.createElement('ul')
            this.points.className = 'points'
            for (var i = 0; i < this.len; i++) {
                var li = document.createElement('li');
                li.className = 'point'
                li.setAttribute('data-i', i)
                this.points.append(li);
            }
            this.obj.append(this.points);
            this.point = this.obj.querySelectorAll('.point');
            this.point[0].classList.add('active')

            this.points.onclick = function (e) {
                that.pointClick(e);
            }
            //圆点点击的封装函数
            Loop.prototype.pointClick = function (e) {
                if (e.target.localName == 'li') {
                    this.index = e.target.dataset.i;
                    this.move();
                }
            }
            //鼠标移入移出事件。
            Loop.prototype.inOut = function () {
                var that = this
                this.obj.onmouseenter = function () {
                    clearInterval(that.timer)
                }
                //
                this.obj.onmouseleave = function () {
                    that.autoplay();
                }
            }
        }
        var loop1 = new Loop({
            selector: '.loop1',
            // width: 1226,
            // height: 460,
            autoplay: true,
            btnClick: true,
            pointClick: true,
            inOut: true
        })

        function Loop2(params) {
            this.obj = document.querySelector(params.selector)
            this.loop = this.obj.querySelector('.loop-area1')
            this.obj.style.height = params.height + "px"
            this.obj.style.width = params.width + "px"
            this.items = this.obj.querySelectorAll('.loop-area1 div')
            // this.items[0].classList.add('active')
            this.len = this.items.length;
            this.index = 0;
            if (params.autoplay) {
                this.autoplay();
            }
        }
        Loop2.prototype.move = function () {
            // console.log(this.items[this.index])
            for (var i = 0; i < this.len; i++) {
                this.items[i].classList.remove('active')
            }
            this.items[this.index].classList.add('active')
        }
        //乡下一张点击
        Loop2.prototype.next = function () {
            this.index++;
            if (this.index >= this.len) {
                this.index = 0
            }
            this.move()
        }
        //autoplay是一个计时器
        Loop2.prototype.autoplay = function () {
            var that = this;
            // console.log(that)
            this.timer = setInterval(function () {
                that.next();
            }, 3000)
        }
        var loop2 = new Loop2({
            selector: '.loop2',
            autoplay: true,
        })

        var spangt = document.querySelector('.spangt')
        var spanlt = document.querySelector('.spanlt')
        var lunbo3 = document.querySelector('.content2-lunbo1')
        var lunbo3img = document.querySelector('.content2-lunbo img')

        var index3 = 0;

        spangt.onclick = function () {
            //   for(var i =200;i<lunbo3img.width;)
            // console.log(lunbo3)
            index3 += 4
            console.log(lunbo3.style.transform.translateX)
            if (lunbo3.style.transform == 'translateX(-3200px)') {
                lunbo3.style.transform = 'translateX(0px)';
                lunbo3.style.transition = "0s all"

                index3 = 0
            } else {
                lunbo3.style.transform = "translateX(-" + index3 * 200 + "px)"
                lunbo3.style.transition = "0.5s all"
                console.log(index3)
            }
        }
        var index4 = 0
        spanlt.onclick = function () {
            index4 -= 4
            // console.log(lunbo3.style.transform)
            if (index4 < 0) {
                index4 = 16;
                lunbo3.style.transition = "0.5s all";
                lunbo3.style.transform = 'translateX(-3200px)';
                lunbo3.style.transform = "translateX(" + -index4 * 200 + "px)";


            } else {
                lunbo3.style.transition = "0.5s all";
                lunbo3.style.transform = "translateX(" + -index4 * 200 + "px)";
                // console.log(index4);
                // console.log(lunbo3.style.transform.translateX)

            }



            // lunbo3img.width
        }
        //     spanlt.onclick = function () {
        //     //   for(var i =200;i<lunbo3img.width;)
        //     var i =200;
        // //    alert(e)
        // //    console.log(e)
        //         console.log(lunbo3.style)
        //         var i=i*3
        //         lunbo3.style.transform="translateX("+i+"px)"
        //         // lunbo3img.width
        //     }
    </script>
    <script src="./js/fenlei.js"></script>

</body>

</html>